<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="../../css/public.css" media="all">
</head>

<body>
    <div class="layuimini-container">
        <div class="layuimini-main">

            <fieldset class="table-search-fieldset">
                <legend>搜索信息</legend>
                <div style="margin: 10px 10px 10px 10px">
                    <form class="layui-form layui-form-pane" action="">
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">id号</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="id" id = "id" autocomplete="off" class="layui-input" lay-verify="id">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">起搏器名称</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="name" id = "name" autocomplete="off" class="layui-input" lay-verify="name">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">型号</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="modelNumber" id = "modelNumber" autocomplete="off" class="layui-input" lay-verify="modelNumber">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">序列号</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="productNumber" id = "productNumber" autocomplete="off" class="layui-input" lay-verify="productNumber">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">公司</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="companyName" id = "companyName" autocomplete="off" class="layui-input" lay-verify="companyName">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label id="form_submit" type="submit" lay-submit lay-filter="data-search-btn"
                                    class="layui-btn">点击搜索</label>
                            </div>
                        </div>
                    </form>
                </div>
            </fieldset>

            <script type="text/html" id="toolbarDemo">
            <div class="layui-btn-container">
                <button class="layui-btn layui-btn-sm data-add-btn" lay-event="add"> 添加 </button>
                <button id="deleteBtn" class="layui-btn layui-btn-sm layui-btn-danger data-delete-btn" lay-event="delete"> 删除 </button>
                <button id="method_state" class="layui-btn layui-btn-sm layui-btn-primary" style="display: none;"></button>
                <button id="table_tip" class="layui-btn layui-btn-sm layui-btn-primary" >点击修改详情</button>
                <button id="table_tip" class="layui-btn layui-btn-sm layui-btn-primary" >右侧可自定义筛选列</button>
            </div>
        </script>

            <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>
            <script type="text/html" id="currentTableBar">
            <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
            <a class="layui-btn layui-btn-xs data-count-edit" lay-event="edit">编辑</a>
        </script>

        </div>
    </div>

    <script src="../../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
    <script src="../../js/basic-load.js" charset="utf-8"></script>
    <script>
        urlfront = url_basic
        var this_privilege = -1

        layui.use(['form', 'table', 'laydate'], function () {
            var $ = layui.jquery,
                form = layui.form,
                table = layui.table;
            // $.ajax({    // 获取权限用户名等信息
            //     url: "http://192.168.1.100:5003/member/user/info",
            //     type: "POST",
            //     data: {},
            //     success: function (data, textStatus) {
            //         console.log(data)
            //         console.log(textStatus)
            //         this_privilege = data.privilege
            //     },
            //     error: function (xhr, errorText, errorType) {
            //         console.log(xhr.status)
            //         console.log(errorType)
            //     },
            //     complete: function () {
            //     },
            //     dataType: "json"
            // })
            form.verify({
                id:[
                    /^(\d{0,20})?$/
                    , '请输入正确的起搏器id，不超过20位'
                ]
                , name: function (value) {
                    if (value.length > 33) {
                        return '起搏器名字最大长度不超过33个字符';
                    }
                }
                , modelNumber: function (value) {
                    if (value.length > 10) {
                        return '起搏器型号最大长度不超过10个字符';
                    }
                }
                , productNumber: function (value) {
                    if (value.length > 10) {
                        return '起搏器序列号最大长度不超过10个字符';
                    }
                }
                , companyName: function (value) {
                    if (value.length > 33) {
                        return '公司名字最大长度不超过33个字符';
                    }
                }
                ,
            });
            table.render({
                elem: '#currentTableId',
                autoSort: true,
                url: `${url_basic}/pacemaker/search`,
                method: 'post',
                contentType: 'application/json',
                toolbar: '#toolbarDemo',
                skin: 'line',
                even: true,
                size: 'lg',
                defaultToolbar: ['filter', 'exports', 'print', {
                    title: '提示',
                    layEvent: 'LAYTABLE_TIPS',
                    icon: 'layui-icon-tips'
                }],
                cols: [[
                    { type: "checkbox", minWidth: 50 },
                    { field: 'id', minWidth: 100, title: 'id号', event: 'pacemakerDetail', style: 'cursor: pointer;', sort: true },
                    { field: 'name', minWidth: 100, title: '起搏器名称', event: 'pacemakerDetail', style: 'cursor: pointer;', sort: true },
                    { field: 'modelNumber', minWidth: 100, title: '型号', event: 'pacemakerDetail', style: 'cursor: pointer;', sort: true },
                    { field: 'productNumber', minWidth: 100, title: '序列号', event: 'pacemakerDetail', style: 'cursor: pointer;', sort: true },
                    { field: 'companyName', minWidth: 100, title: '公司', event: 'pacemakerDetail', style: 'cursor: pointer;', sort: true },
                ]],
                limits: [10, 15, 20, 25, 50, 100],
                limit: 15,
                page: true,
                skin: 'line'
            });
            table.on('sort(currentTableFilter)', function (obj) { //注：sort 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
                console.log(obj.field); //当前排序的字段名
                console.log(obj.type); //当前排序类型：desc（降序）、asc（升序）、null（空对象，默认排序）
                console.log(this); //当前排序的 th 对象

                //尽管我们的 table 自带排序功能，但并没有请求服务端。
                //有些时候，你可能需要根据当前排序的字段，重新向服务端发送请求，从而实现服务端排序，如：
                table.reload('currentTableId', {
                    initSort: obj //记录初始排序，如果不设的话，将无法标记表头的排序状态。
                    , where: { //请求参数（注意：这里面的参数可任意定义，并非下面固定的格式）
                        sort_field: obj.field, //排序字段
                        sort_order: obj.type //排序方式
                    }
                });
                // layer.msg('服务端排序。order by ' + obj.field + ' ' + obj.type);
            });

            // 监听搜索操作
            like_search_param = ['id','name','modelNumber','productNumber','companyName']
            form.on('submit(data-search-btn)', function (data) {
                for (var key in data.field) {
                    if (data.field[key] === '')
                        delete data.field[key]
                    else if (like_search_param.indexOf(key) > -1)
                        data.field[key + '-op'] = 'ct'
                }
                console.log(data.field)
                var result = JSON.stringify(data.field);
                console.log(result)
                //执行搜索重载
                table.reload('currentTableId', { where: data.field });
            });
            area1 = document.body.offsetWidth < 800 ? '100%' : '800px'
            table.on('toolbar(currentTableFilter)', function (obj) {
                if (obj.event === 'delete') {  // 监听删除操作
                    var checkStatus = table.checkStatus('currentTableId')
                        , data = checkStatus.data;
                    var tmp = [];
                    for (var i = 0; i < data.length; i++) {
                        tmp.push(data[i].id);
                    }
                    if(tmp.length < 1) return;
                    console.log('批量删除条目，发送信息如下')
                    console.log(JSON.stringify(tmp))
                    $.ajax({
                        url: urlfront + "/pacemaker/delete",
                        type: "POST",
                        data: JSON.stringify(tmp),
                        contentType: 'application/json',
                        success: function (data, textStatus) {
                            console.log(data)
                            console.log(textStatus)
                            if (data.code == 0) {
                                layer.msg('删除成功', { time: 0.5 * 1000 }, function () { });
                            }
                            else {
                                layer.msg('删除失败，原因：' + data.msg);
                            }
                        },
                        error: function (xhr, errorText, errorType) {
                            console.log(xhr.status)
                            console.log(errorType)
                            layer.msg('删除失败（与服务器连接失败）');
                        },
                        complete: function () {
                            table.reload('currentTableId'); //只重载数据
                        },
                        dataType: "json"
                    })
                }else if (obj.event === 'add') {  // 监听添加操作
                    area1 = document.body.offsetWidth < 800 ? '100%' : '800px'
                    console.log(area1)
                    var index = layer.open({
                        title: '新建起搏器信息',
                        type: 2,
                        shade: 0.2,
                        maxmin: true,
                        shadeClose: true,
                        area: [area1, '100%'],
                        content: './detail.html',
                        success: function (layero, index) {
                            console.log(layero);
                            var iframeWin = window[layero.find('iframe')[0]['name']] // //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();
                            iframeWin.setData(null, this_privilege, 1)
                        },
                        end: function () {
                            table.reload('currentTableId'); //只重载数据
                        }
                    });
                    $(window).on("resize", function () {
                        layer.full(index);
                    });
                }
            });

            //监听表格复选框选择
            table.on('checkbox(currentTableFilter)', function (obj) {
                console.log(obj)
            });

            table.on('tool(currentTableFilter)', function (obj) {
                var data = obj.data;
                console.log(data)
                console.log(obj)
                if (obj.event === 'pacemakerDetail') {
                    // area1 = document.body.offsetWidth < 700 ? '100%' : '700px'
                    console.log(area1)
                    var index = layer.open({
                        title: '起搏器详情',
                        type: 2,
                        shade: 0.2,
                        maxmin: true,
                        shadeClose: true,
                        area: [area1, '65%'],
                        content: './detail.html',
                        success: function (layero, index) {
                            console.log(layero);
                            var body = layer.getChildFrame('body', index ,0);
                            var iframeWin = window[layero.find('iframe')[0]['name']] // //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();
                            iframeWin.setData(data, this_privilege)
                        },
                        end: function () {
                            table.reload('currentTableId')
                        }
                    });
                    $(window).on("resize", function () {
                        layer.full(index);
                    });
                    return false;
                }
            });

        });
    </script>

</body>

</html>